﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>演示</title>
	<meta charset="utf-8" />
    <script src="/scripts/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../layer/layer.js"></script>
    <script>
        $(function () {
            $("#test1").click(function () {
                layer.alert('内容1');
            });

            $("#test2").click(function () {
                layer.alert('内容2', { icon: 6 });
            });

            $("#test3").click(function () {
                layer.confirm('是否确认进行该操作？', {
                    btn: ['确认', '取消'] //按钮
                }, function () {
                    layer.msg('接受操作指令！', { icon: 1 });
                }, function () {
                    layer.msg('取消该操作！', {
                        icon: 2,
                        time: 10000, //10s后自动关闭
                        btn: ['明白了', '不明白']
                    });
                });
            });

            $("#test4").click(function () {
                layer.msg('玩命提示中...');
            });

            $("#test5").click(function () {
                layer.msg('取消该操作！', {
                    icon: 2,
                    time: 10000, //10s后自动关闭
                    btn: ['明白了', '不明白']
                });
            });

            $("#test6").click(function () {
                layer.open({
                    type: 1,  //0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。
                    shade: false,
                    title: false, //不显示标题
                    content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    cancel: function () {
                        layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                    }
                });
            });

            $("#test7").click(function () {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-demo', //样式类名      //'layui-layer-rim', //加上边框
                    area: ['420px', '240px'], //宽高
                    closeBtn: 0, //不显示关闭按钮  (0：不显示  1：显示)
                    anim: 2,
                    shadeClose: true, //开启(遮罩关闭)
                    content: '案例打扫房间爱神的箭分段数据丽枫酒店时落发'
                });
            });

            $("#test12").click(function () {
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: '516px',
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: $('#tong')
                });
            });

            $("#test8").click(function () {
                layer.open({
                    type: 2,
                    title: false,
                    closeBtn: 0, //不显示关闭按钮
                    shade: [0],
                    area: ['340px', '215px'],
                    offset: 'rb', //右下角弹出
                    time: 2000, //2秒后自动关闭
                    anim: 2,
                    content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
                    end: function () { //此处用于演示
                        layer.open({
                            type: 2,
                            title: '很多时候，我们想最大化看，比如像这个页面。',
                            shadeClose: true,
                            shade: false,
                            maxmin: true, //开启最大化最小化按钮
                            area: ['893px', '600px'],
                            content: '//fly.layui.com/'
                        });
                    }
                });
            });

            $("#test9").click(function () {
                layer.load();
                //此处演示关闭
                setTimeout(function () {
                    layer.closeAll('loading');
                }, 2000);
            });

            $("#test10").click(function () {
                layer.load(1);
                //此处演示关闭
                setTimeout(function () {
                    layer.closeAll('loading');
                }, 2000);
            });

            $("#test11").click(function () {
                layer.load(2);
                //此处演示关闭
                setTimeout(function () {
                    layer.closeAll('loading');
                }, 2000);
            });

            $("#test14").click(function () {
                layer.msg('加载中', {
                    icon: 16
                  , shade: 0.01
                });
            });

            $("#test13").click(function () {
                layer.open({
                    type: 2,
                    area: ['700px', '450px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: 'page1.html'
                });
            });

            $("#test15").click(function () {
                layer.tips('上', '#test15', {
                    tips: [1, '#0FA6D8'] //还可配置颜色
                });
            });

            $("#test16").click(function () {
                layer.tips('默认就是向右的', '#test16');
            });

            $("#test17").click(function () {
                layer.tips('下', '#test17', {
                    tips: 3
                });
            });

            $("#test18").click(function () {
                layer.tips('左边么么哒', '#test18', {
                    tips: [4, '#78BA32']
                });
            });

            $("#test19").click(function () {
                layer.tips('不销毁之前的', '#test19', {
                    tipsMore: true
                });
            });

            $("#test20").click(function () {
                layer.tab({
                    area: ['600px', '300px'],
                    tab: [{
                        title: 'TAB1',
                        content: '内容1'
                    }, {
                        title: 'TAB2',
                        content: '内容2'
                    }, {
                        title: 'TAB3',
                        content: '内容3'
                    }]
                });
            });

            $("#test21").click(function () {
                layer.prompt(function (val, index) {
                    layer.msg('得到了' + val);
                    layer.close(index);
                });
            });

            $("#test22").click(function () {
                layer.prompt({ title: '输入任何口令，并确认', formType: 1 }, function (pass, index) {
                    layer.close(index);
                    layer.prompt({ title: '随便写点啥，并确认', formType: 2 }, function (text, index) {
                        layer.close(index);
                        layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text);
                    });
                });
            });

            $("#test23").click(function () {
                $.getJSON('test/photos.json?v=' + new Date, function (json) {
                    layer.photos({
                        photos: json //格式见API文档手册页
                      , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                    });
                });

                //{
                //    "title": "布草", 
                //    "id": 123, 
                //    "start": 0, 
                //    "data": [ 
                //    {
                //        "alt": "b1",
                //        "pid": 1, 
                //        "src": "../images/OS/bucao/b1.jpg", 
                //        "thumb": "../images/OS/bucao/b1.jpg"
                //    },
                //    {
                //        "alt": "b2",
                //        "pid": 2, 
                //        "src": "../images/OS/bucao/b2.jpg", 
                //        "thumb": "../images/OS/bucao/b2.jpg"
                //    }
                //    ]
                //}


                //function bucao()
                //{
                //    $.getJSON('http://192.168.1.122:8084/json/osbucao.json',function(json){ 
                //        layer.photos({ 
                //            json: json 
                //        }); 
                //    }); 
                //}
            });

            $("#test24").click(function () {
                layer.open({
                    content: '浏览器滚动条已锁',
                    scrollbar: false
                });
            });

            $("#test25").click(function () {
                var index = layer.open({
                    type: 2,
                    content: 'http://layim.layui.com',
                    area: ['320px', '195px'],
                    maxmin: true
                });
                layer.full(index);
            });

            $("#test26").click(function () {
                layer.msg('灵活运用offset', {
                    offset: 't',
                    anim: 6
                });
            });

            $("#test27").click(function () {
                layer.open({
                    type: 2 //此处以iframe举例
  , title: '当你选择该窗体时，即会在最顶端'
  , area: ['390px', '330px']
  , shade: 0
  , offset: [ //为了演示，随机坐标
    Math.random() * ($(window).height() - 300)
    , Math.random() * ($(window).width() - 390)
  ]
  , maxmin: true
  , content: 'settop.html'
  , btn: ['继续弹出', '全部关闭'] //只是为了演示
  , yes: function () {
      $(that).click(); //此处只是为了演示，实际使用可以剔除
  }
  , btn2: function () {
      layer.closeAll();
  }

  , zIndex: layer.zIndex //重点1
  , success: function (layero) {
      layer.setTop(layero); //重点2
  }
                });
            });

            $("#test28").click(function () {
                layer.open({
                    type: 1,
                    title: false //不显示标题栏
  , closeBtn: false
  , area: '300px;'
  , shade: 0.8
  , id: 'LAY_layuipro' //设定一个id，防止重复弹出
  , resize: false
  , btn: ['火速围观', '残忍拒绝']
  , btnAlign: 'c'
  , moveType: 1 //拖拽模式，0或者1
  , content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>'
  , success: function (layero) {
      var btn = layero.find('.layui-layer-btn');
      btn.find('.layui-layer-btn0').attr({
          href: 'http://www.layui.com/'
        , target: '_blank'
      });
  }
                });
            });

            $("#test29").click(function () {
                layer.open({
                    type: 1
   , offset: 'rb' //具体配置参考：offset参数项
   , content: '<div style="padding: 20px 80px;">内容</div>'
   , btn: '关闭全部'
   , btnAlign: 'c' //按钮居中
   , shade: 0 //不显示遮罩
   , yes: function () {
       layer.closeAll();
   }
                });
            });
        })

        function TiShi(ico) {
            layer.alert('图标：' + ico, { icon: ico });
        }
    </script>
</head>
<body>
    <p>
        anim: 0 平滑放大。默认
        anim: 1 从上掉落
        anim: 2 从最底部往上滑入
        anim: 3 从左滑入
        anim: 4 从左翻滚
        anim: 5 渐显
        anim: 6 抖动
    </p>
    <p>
        btnAlign: 'l' 按钮左对齐
        btnAlign: 'c' 按钮居中对齐
        btnAlign: 'r' 按钮右对齐。默认值，不用设置
    </p>
    <p>
        offset: 'auto' 默认坐标，即垂直水平居中
        offset: '100px' 只定义top坐标，水平保持居中
        offset: ['100px', '50px'] 同时定义top、left坐标
        offset: 't' 快捷设置顶部坐标
        offset: 'r' 快捷设置右边缘坐标
        offset: 'b' 快捷设置底部坐标
        offset: 'l' 快捷设置左边缘坐标
        offset: 'lt' 快捷设置左上角
        offset: 'lb' 快捷设置左下角
        offset: 'rt' 快捷设置右上角
        offset: 'rb' 快捷设置右下角
    </p>
    <p>
        <button id="test1">提示框(无图标)</button>
        <button id="test2">提示框(有图标)</button>
        <button onclick="TiShi(0);">提示框(感叹号)</button>
        <button onclick="TiShi(1);">提示框(打勾)</button>
        <button onclick="TiShi(2);">提示框(打叉)</button>
        <button onclick="TiShi(3);">提示框(问号)</button>
        <button onclick="TiShi(4);">提示框(锁定)</button>
        <button onclick="TiShi(5);">提示框(哭脸)</button>
        <button onclick="TiShi(6);">提示框(笑脸)</button>
    </p>
    <p>
        <button id="test3">询问框</button>
    </p>
    <p>
        <button id="test4">无关闭提示框</button>
        <button id="test5">无关闭提示框(按钮)</button>
    </p>
    <p>
        <button id="test6">捕获页</button>
        <button id="test7">页面层</button>
        <button id="test12">图片层</button>
        <button id="test8">iframe层</button>
        <button id="test13">iframe层(父子页面)</button>
        <div class="layer_notice" style="display:none; background-color:yellow;">阿凡达六块腹肌代扣代缴锁定数量辣椒粉来得及撒发了多少</div>
        <div id="tong" style="display:none;"><img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" /></div>
    </p>
    <p>
        <button id="test9">加载层1</button>
        <button id="test10">加载层2</button>
        <button id="test11">加载层3</button>
        <button id="test14">加载层4</button>
    </p>
    <p>
        <button id="test15">tips层(上)</button>
        <button id="test16">tips层(右)</button>
        <button id="test17">tips层(下)</button>
        <button id="test18">tips层(左)</button>
        <button id="test19">tips层(允许多个)</button>
    </p>
    <p>
        <button id="test20">tab层</button>
        <button id="test21">默认prompt层</button>
        <button id="test22">prompt层</button>
        <button id="test23">相册层</button>
        <button id="test24">屏蔽浏览器滚动条</button>
        <button id="test25">弹出即全屏</button>
        <button id="test26">正上方</button>
        <button id="test27">多窗口模式，层叠置顶</button>
        <button id="test28">公告层</button>
        <button id="test29">边缘弹出</button>
    </p>
</body>
</html>
